<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>权限角色绑定</title>
    <link href="../resources/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="../resources/css/ligerui-icons.css" rel="stylesheet" type="text/css" />  
	<script src="../resources/js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="../resources/js/ligerui.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../resources/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="../resources/js/jquery.metadata.js"></script>
	<script type="text/javascript" src="../resources/js/messages_cn.js"></script>
	<script type="text/javascript" src="../resources/js/form-validate.js"></script>
    <script type="text/javascript">
        $(function ()
        {   
            //构建角色树
        	window['t_role']= $("#roleTree").ligerTree({ 
	            checkbox : false, 
	            url:'/baohua/role/list',
	            idFieldName :'roleId',
	            parentIDFieldName :'parentId',
	            textFieldName : 'roleName',
	            nodeWidth: 200,
	            onClick : nodeClick
            });

            //构建菜单树
             window['t_menu'] =$("#menuTree").ligerTree({ 
              checkbox : true, 
              url:'/baohua/menu/list',
	            idFieldName :'menuNO',
	            parentIDFieldName :'parentNO',
	            textFieldName : 'menuName',
	            nodeWidth: 250
          })

           $.metadata.setType("attr", "validate");
	          $("#form1").validate({
	         	 errorPlacement: errorPlacement,
	         	 success: mess
	          });

          $("form").ligerForm();

        	$("#toolBar").ligerToolBar( {
                items : [
							{ text: '增加角色', click: addRole,icon:'add' },
							{line: true},
							{ text: '修改角色', click: updateRole,icon:'edit' },
							{line: true},
							{ text: '删除角色', click: removeRole, icon: 'busy' },
						]
				
            });

        });

        //增加角色
       var addRole = function () {
           //获取勾选的菜单
    	     var menunode = t_menu.getChecked();
    	     //将勾选的菜单menuNO数组
      	     var selectarrs = new Array();
      	     //存储父节点不在selectarrs的数组,即最顶层菜单
      	     var arrs = new Array();
    	     for(var i=0; i<menunode.length; i++) {
    	    	 selectarrs.push(menunode[i].data.menuNO);
    	    	 //判断父节点是否在selectarrs存在
    	    	  if($.inArray(menunode[i].data.parentNO, selectarrs)<0){
 	                 arrs.push(menunode[i].data.menuNO);
 	              }
        	 }
        	 //将数据转换为,分隔的字符串
    	     var menuNOs = arrs.join(",");
   	         $("#menuNOs").val(menuNOs);
   	         //选择提交的方法
        	 $("#form1").prop("action", "add");
 	         $("#form1").submit();
          };

       //修改角色
       var updateRole = function () {
           //获取选择的角色
        	 var rolenode = t_role.getSelected();
        	 //角色不为空时
             if(rolenode) {
            	//获取勾选的菜单
            	 var menunode = t_menu.getChecked();
            	//将勾选的菜单menuNO数组
          	     var selectarrs = new Array();
          	     //存储父节点不在selectarrs的数组,即最顶层菜单
          	     var arrs = new Array();
        	     for(var i=0; i<menunode.length; i++) {
        	    	 selectarrs.push(menunode[i].data.menuNO);
        	    	//判断父节点是否在selectarrs存在
        	    	  if($.inArray(menunode[i].data.parentNO, selectarrs)<0){
     	                 arrs.push(menunode[i].data.menuNO);
     	              }
            	 }
        	   //将数据转换为,分隔的字符串
        	     var menuNOs = arrs.join(",");
          	 	$("#menuNOs").val(menuNOs);
          	 	//将roleId传值到后台, 为了判断角色是否存在
          	 	$("<input type='hidden' id='roleId' name='roleId' value='"+ rolenode.data.roleId +"' />").appendTo($("#form1"));
          	//选择提交的方法
             $("#form1").prop("action", "update");
             $("#form1").submit();
             }else {
             	$.ligerDialog.warn('请选择一个节点!');
             }
          }

       //删除节点
       var removeRole = function () {
        	var node = t_role.getSelected();
        	if(node) {
        		$.ligerDialog.confirm("您真的要删除[<span style='color:red; font-weight: bold'>" + node.data.roleName + "</span>]吗?", function (yes) { 
        			if(yes){
            			 window.location.href="delete/" + node.data.roleId;
        			}
        		})
        	}else {
        		$.ligerDialog.warn('请选择一个节点!');
            }
          }

       //点击角色节点是触发事件
         var nodeClick = function(node) {
             //同时取得整个菜单树和此节点所对象的菜单
        	var promise = $.when($.get("/baohua/menu/list"),$.get("queryMenuList/" + node.data.roleId));
            promise.done(function(data1, data2) {
            	 var arrs = new Array();
            	 var menus = data1[0];
                 var childMenu = data2[0];
                 //将此节点所对应的的菜单的Id加入到arrs数组中
                 $(childMenu).each(function(i){
                     arrs.push(childMenu[i].menuNO);
                 });
                 //遍历整棵菜单树
                 for(var i=0; i<menus.length; i++) {
                     //如果菜单树的节点在所定义的菜单中就将此节点的复选框勾上
                       if($.inArray(menus[i].menuNO, arrs)!=-1) {
                           menus[i].ischecked = true;
                         }
                }
                 //将$("#menuTree")清空
                 $("#menuTree").html("");
                 //重新构建菜单树
                 window['t_menu'] =$("#menuTree").ligerTree({ 
                     checkbox : true, 
                     data:menus, 
       	             idFieldName :'menuNO',
       	             parentIDFieldName :'parentNO',
       	             textFieldName : 'menuName',
       	             nodeWidth: 250
                 })
              });
        	 $("#roleName").val(node.data.roleName);
        	 $("#memo").val(node.data.memo);
         };

         
    </script>
    <style type="text/css">
        .l-table-edit-td{ padding:3px;}
        .l-verify-tip{ left:230px; top:120px;}
    </style>
</head>
<body style="padding:10px">
<!-- 1.导航条 -->
   <span style=" margin: 5px 10px; display: block; font-weight: bold;">宝华茶餐厅 > 系统设定 > 角色权限设定</span>
    <div style="width:800px; height:430px; margin-left: 10px; margin-top: -10px;">
	    <div style="width:250px; height:430px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">
		    <ul id="roleTree">
		    </ul>
	    </div> 
	    
	    <div style="width:415px; height:430px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">
	      <form id="form1" method="post">
	      <div id="toolBar"></div>
			<table cellpadding="0" cellspacing="0" width="400px">
			    <tr>
			       <td align="right" class="l-table-edit-td" width="80px">角色名称: </td>
			       <td class="l-table-edit-td" width="190">
			          <input type="text" ltype="l-text"  id="roleName" name="roleName" validate="{required:true,maxlength:15}"/>
			          <input type="hidden" id="menuNOs" name="menuNOs"/>
			       </td>
			       <td align="left" width="130px"></td>
			    <tr>
			       <td align="right" class="l-table-edit-td" width="80px">角色备注:</td>
				   <td class="l-table-edit-td" colspan="2">
			          <textarea cols="50" rows="2" class="l-textarea" style="width:320px" id="memo" name="memo"></textarea>
			       </td>
			    </tr>
			    <tr>
			        <tr>
			          
				       <td class="l-table-edit-td" colspan="2" align="right">
				       </td>
    				<tr>
			    </tr>
		    </table> 
         </form>
         <div style="width:390px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">
	   	 <ul id="menuTree"></ul>
	   	 </div>
	    </div>
    </div>
</body>
</html>
